﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="test.css">
</head>


<body>
    <div id="bomb">
        <button v-on:click="init()">开始</button>
        <span>用时</span>
        <span>{{useTime}}</span> 标记延时
        <input type="text" v-model="duration">
        <dragbar :></dragbar>
        <table>
            <tr v-for="row in items">
                <td v-for="col in row" v-on:mousedown="mouseDown(col,$event)" v-on:mouseup="mouseUp(col,$event)" v-bind:class="['item',{'open':col.isOpen}]">
                    {{col.isOpen?col.nearBomb:''}}
                    <span v-bind:class="[{'flag':col.isFlag}]"></span>
                </td>
            </tr>
        </table>
    </div>
</body>

<template id="dragBar">
    <div class="dragBar">
        <div class="line">
            <div class="circle" v-on:mousedown="dragStart()" v-on:mouseup="dragEnd()" v-on:mousemove="drag($event)"  v-bind:style="{left:left+'px'}">
            </div>
            <span>
                {{left}}
            </span>
        </div>
    </div>
</template>

</html>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="test.js"></script>